import React, { useState } from 'react';
import {
  Container,
  Paper,
  Typography,
  Box,
  Tab,
  Tabs,
  Fade,
} from '@mui/material';
import {
  VideoCall,
  PersonAdd,
} from '@mui/icons-material';
import CreateRoom from './CreateRoom';
import JoinRoom from './JoinRoom';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`home-tabpanel-${index}`}
      aria-labelledby={`home-tab-${index}`}
    >
      {value === index && (
        <Fade in={true} timeout={300}>
          <Box sx={{ pt: 3 }}>
            {children}
          </Box>
        </Fade>
      )}
    </div>
  );
};

const HomePage: React.FC = () => {
  const [tabValue, setTabValue] = useState(0);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
  };

  return (
    <Container maxWidth="md" sx={{ mt: 4, flex: 1, display: 'flex', flexDirection: 'column' }}>
      <Box sx={{ textAlign: 'center', mb: 4 }}>
        <Typography
          variant="h3"
          component="h1"
          gutterBottom
          sx={{
            fontWeight: 700,
            background: 'linear-gradient(45deg, #1976d2 30%, #42a5f5 90%)',
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          欢迎使用 FaceTime
        </Typography>
        <Typography
          variant="h6"
          color="text.secondary"
          sx={{ maxWidth: 600, mx: 'auto' }}
        >
          基于 WebRTC 的高质量视频通话应用，支持实时音视频通信
        </Typography>
      </Box>

      <Paper
        elevation={3}
        sx={{
          borderRadius: 3,
          overflow: 'hidden',
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs
            value={tabValue}
            onChange={handleTabChange}
            aria-label="home tabs"
            variant="fullWidth"
            sx={{
              '& .MuiTab-root': {
                minHeight: 64,
                fontSize: '1rem',
                fontWeight: 600,
              },
            }}
          >
            <Tab
              icon={<VideoCall />}
              label="创建房间"
              iconPosition="start"
              id="home-tab-0"
              aria-controls="home-tabpanel-0"
            />
            <Tab
              icon={<PersonAdd />}
              label="加入房间"
              iconPosition="start"
              id="home-tab-1"
              aria-controls="home-tabpanel-1"
            />
          </Tabs>
        </Box>

        <Box sx={{ flex: 1, p: 3 }}>
          <TabPanel value={tabValue} index={0}>
            <CreateRoom />
          </TabPanel>
          <TabPanel value={tabValue} index={1}>
            <JoinRoom />
          </TabPanel>
        </Box>
      </Paper>

      {/* 功能特性说明 */}
      <Box sx={{ mt: 4, textAlign: 'center' }}>
        <Typography variant="body2" color="text.secondary">
          支持高清视频通话 • 实时音频传输 • 跨平台兼容 • 安全加密
        </Typography>
      </Box>
    </Container>
  );
};

export default HomePage;